<#include "/admin/_inc/_head.html"/>
<#include "/admin/_inc/_layout.html" />
<!DOCTYPE html>
<html lang="en">

<head>
    <@head />
    <link href="/assets/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <style type="text/css">

        .mfs-selected-option {
            border: 1px #ccc solid;
            display: inline-block;
            width: 100%;
            font-size: 14px;
            height: 31px;
            line-height: 2.42857;
            padding-left: 4px;
        }

        .mfs-options {
            position: absolute;
            border: 1px #ccc solid;
            /* border-top:0px; */
            width: 100%;
            margin: 0;
            padding: 0px;
            color: #333;
            overflow: auto;
            min-height: 100px;
            max-height: 300px;
            background: #ffffff;
            z-index: 9;
            margin-top: -6px;
        }
    </style>
</head>

<body>
<@layout>
<div class="pd-20">

    <form action="<#if model?exists>${ctx_admin}/wx-button/update<#else>${ctx_admin}/wx-button/add</#if>" method="post" class="form form-horizontal"
          id="form-add">


            <input id="h_roleId" type="hidden" value="${roleId}">
            <div id="list">
            </div>
            <div class="row cl"  style="margin-top: 0;">
                <div class="col-10 col-offset-0">
                    <button type="submit" class="btn btn-success radius" id="admin-role-save" name="admin-role-save"><i class="icon-ok"></i> 确定</button>
                </div>
            </div>
            <ul id="buttonTree" class="ztree" style="margin-top: 0; width: 160px;"></ul>


    </form>

    <div id="resourceContent" class="resourceContent">
        <ul id="resourceTree" class="ztree selectZtree" style="margin-top: 0; width: 160px;"></ul>
    </div>
</div>
</@layout>

<@editjs />
<script type="text/javascript" src="/assets/lib/zTree/v3/js/jquery.ztree.all-3.5.js"></script>
<script type="text/javascript" src="/assets/js/droptree.js"></script>
<script type="text/javascript">
    $(function () {
        buttonTree.getPerentButton();

        $("#form-add").validate({
            onkeyup: false,
            focusCleanup: true,
            success: "valid",
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    type: 'post',
                    url: form.action,
                    success: function (data) {
                        if (data.success) {
                            layer.msg(data.message, { icon: 1, time: 2000 }, function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.$('.btn-refresh').click();
                                //parent.initTable();
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg(data.message, { icon: 2, time: 3000 }, function () { });
                        }
                    },
                    error: function (XmlHttpRequest, textStatus, errorThrown) {
                        layer.msg('error!', { icon: 2, time: 3000 }, function () { });
                    }
                });
            }
        });

    });

    var buttonTree={
        setting : {
            check: {
                enable: true,//设置zTree的节点上是否显示checkbox/radio框，默认值: false
                chkboxType:  { "Y" : "p", "N" : "s" } //{ "Y": "ps", "N": "ps" }
            },
            view: {
                dblClickExpand: false,
                showLine: false,
                selectedMulti: false
            },
            key:{
                checked:"checked"//zTree 节点数据中保存check状态的属性名称。默认值："checked"
            },
            data: {
                simpleData: {
                    enable:true,
                    idKey: "buttonId",
                    pIdKey: "pButtonId",
                    rootPId: "0"
                },
                key: {
                    name: "name"
                }
            },
            callback: {
                beforeClick: function(treeId, treeNode) {
                    var zTree = $.fn.zTree.getZTreeObj("tree");
                    if (treeNode.isParent) {
                        zTree.expandNode(treeNode);
                        return false;
                    } else {
                        demoIframe.attr("src",treeNode.file + ".html");
                        return true;
                    }
                }
            }
        },
        getPerentButton:function(){
            $.ajax({
                type: "POST",
                data: {},
                dataType: 'json',
                url: global.adminPath+'/wx-button/tree',
                success: function(res){
                    var data=res.data;
                    var treeObj=$.fn.zTree.init($("#buttonTree"), buttonTree.setting, data);
                    buttonTree.selectNode();
                    treeObj.expandAll(true);
                }
            });
        },
        getSelectedCheckNodes:function(obj){
            var treeObj = $.fn.zTree.getZTreeObj("buttonTree");//获取树对象
            var nodes = treeObj.getChangeCheckedNodes();//选定节点
            var checked=null;
            var count = 0;
            var list=$('#list');
            list.html('');
            if(nodes.length>0){
                for(var i=0;i<nodes.length;i++){
                    checked=nodes[i].checked;//获取勾选属性
                    if(checked==true){//选中节点
                        var buttonId=nodes[i].buttonId;
                        list.append('<input name="buttonId['+i+']" type="hidden" value="'+buttonId+'" >');

                        count++;//自增1
                    }
                }
                return true;

            }else{
                alert("请先选中节点！");
                $(obj)[0].checked=false;//取消勾选状态
                return false;
            }
        },
        selectNode:function(){
            var treeObj = $.fn.zTree.getZTreeObj("resourceTree");//获取树对象
            var data={};
            data.id=$('#h_roleId').val();
            $.ajax({
                type: "POST",
                data: data,
                dataType: 'json',
                url: global.basePath+'/role/roleresourcedata',
                success: function(res){
                    var data=res.data;
                    for(var i=0;i<data.length;i++){
                        var roleresource= data[i];
                        var nodes = treeObj.getNodesByParam("resourceId", roleresource.resourceId, null);
                        if(nodes.length>0){
                            //treeObj.selectNode(nodes[0],true);
                            treeObj.checkNode(nodes[0], true, true);
                            //treeObj.expandNode(nodeId, true, true, true);
                        }
                    }
                }
            });





        }

    }
</script>


</body>

</html>